<!--
 * @Author: IBOSS 2776641037@qq.com
 * @Date: 2025-08-15 13:36:51
 * @LastEditors: IBOSS 2776641037@qq.com
 * @LastEditTime: 2025-08-16 09:12:50
 * @FilePath: \hm-admin\src\views\park\ParkBuilding.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { onMounted, shallowRef ,triggerRef, onBeforeUnmount, reactive, ref } from "vue";


//shallowRef 在以下场景中尤其有用：
//1. 性能优化 当你有一个很大的对象或数组，但其内部嵌套数据的变化不需要响应式更新
//2. 例如，当你需要与第三方库
//3. 避免不必要的深度响应 对象的深层结构非常复杂
const data = shallowRef({ count: 0 })

const data_ = function(){

// 修改内部属性，默认不会触发更新
data.value.count++
// 手动强制触发与此 shallowRef 关联的更新
triggerRef(data)

}

// 1. 用基本类型值初始化 - 行为与 ref 基本相同
const count = shallowRef(0)
count.value++ // 这会触发响应式更新

// 2. 用对象初始化 - 这是 shallowRef 与 ref 表现不同的地方
const user = shallowRef(
  { name: 'Alice',
   age: 25, 
   details: { hobbies: ['reading'] } 
  }
)


const click_ = function(){

// 以下操作不会触发响应式更新（因为修改的是内部属性）：
user.value.name = 'Bob1' // ❌ 非响应
user.value.details.hobbies.push('swimming') // ❌ 非响应

// 以下操作会触发响应式更新（因为替换了整个 .value）：
user.value = { ...user.value, name: 'Bob' } // ✅ 响应

}


// 页面加载获取数据
onMounted(() => {
  console.log('22222232');
});



</script>

<template>
  <div class="park-building-page">park-building</div>

  <div>count {{count }}</div>
  <div @click="click_">user {{user }}</div>
  <div @click="data_">data {{data }}</div>
  

</template>

<style lang="scss" scoped>
.park-building-page {
  padding: 20px;
  background-color: #fff;
}



</style>
